import { FC, memo, useCallback } from 'react';
import styles from './statusbar.module.less';
import { FetchMinerParams } from '@/hooks/swr/useFetchMinerSwr';

type ChangeCurrentStatusType = (
  param: Omit<keyof FetchMinerParams, any>,
) => void;

interface IPageProps {
  currentStatus: number;
  miner_num?: number;
  normal_count?: number;
  warning_count?: number;
  abnormal_count?: number;
  downtime_count?: number;
  online_count?: number;
  offline_count?: number;
  changeCurrentStatus: ChangeCurrentStatusType;
  loading: boolean;
}

const StatusBarItem: FC<{
  count: number | undefined;
  title: string;
  status: number;
  changeCurrentStatus: ChangeCurrentStatusType;
  currentStatus: number;
  clazz?: string;
}> = memo((props) => {
  const handlerClick = useCallback(() => {
    return props.changeCurrentStatus({
      page: 1,
      status: props.status,
    });
  }, []);
  return (
    <div
      className={`flex-col ai-center ${styles.statusBarItem} ${
        props.status === props.currentStatus ? styles.active : ''
      }`}
      onClick={() => handlerClick()}
    >
      <div className={`${styles.title} `}>{props.title}</div>
      <div className={`${styles.countBg} ${props.clazz}`}>{props.count}</div>
    </div>
  );
});

const StatusBar: FC<IPageProps> = (props) => {
  const {
    currentStatus,
    miner_num,
    normal_count,
    warning_count,
    abnormal_count,
    downtime_count,
    online_count,
    offline_count,
    loading,
  } = props;
  return (
    <div
      className={`flex jc-around ${styles.statusBar} ${
        loading ? styles.loading : ''
      }`}
    >
      {[
        {
          title: '全部',
          status: -1,
          count: miner_num,
          clazz: '',
        },
        {
          title: '正常',
          status: 0,
          count: normal_count,
          clazz: styles.normalCount,
        },
        {
          title: '警告',
          status: 1,
          count: warning_count,
          clazz: styles.warningCount,
        },
        {
          title: '异常',
          status: 2,
          count: abnormal_count,
          clazz: styles.abnormalCount,
        },
        {
          title: '停机',
          status: 3,
          count: downtime_count,
          clazz: styles.downtimeCount,
        },
        {
          title: '在线',
          status: -2,
          count: online_count,
          clazz: styles.onlineCount,
        },
        {
          title: '离线',
          status: 4,
          count: offline_count,
          clazz: styles.offlineCount,
        },
      ].map((item) => {
        return (
          <StatusBarItem
            key={item.status}
            status={item.status}
            clazz={item.clazz}
            currentStatus={currentStatus}
            title={item.title}
            changeCurrentStatus={props.changeCurrentStatus}
            count={item.count}
          />
        );
      })}
    </div>
  );
};

export default memo(StatusBar);
